<template>
  <div class="search">
    <input
      v-model="keywords"
      type="text"
      class="form-control search-input"
      placeholder="Recipient's username"
      aria-label="Recipient's username"
      aria-describedby="button-addon2"
    />
    <div class="input-group-append">
      <button
        class="btn btn-outline-secondary search-btn"
        type="button"
        id="button-addon2"
        @click="search"
      >
        <i class="el-icon-search"></i>
        搜索
      </button>
    </div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  keywords: string = "";
  search() {
    console.log(this.keywords,'触发搜索方法，跳转');
    this["$router"].push({path:"/search",query:{keywords:this.keywords}});

    console.log('存储到搜索记录');
    this.keywords='';
  }
}
</script>

<style lang='less' scoped>
.search {
  .wh(calc(100% - 900px), 30px);
  max-width: 700px;
  .flex-box(row, flex-start, center, nowrap);
  margin-left: 15px;
  margin-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  .search-input {
    .wh(100%, 30px);
    border-radius: 1rem 0 0 1rem;
    line-height: 1;
    background-color: #f5f6f7;
    &:focus {
      border-color: #fc5531;
      border-right: none;
      box-shadow: none;
    }
  }
  .search-btn {
    .wh(100px, 30px);
    border-radius: 0 1rem 1rem 0;
    line-height: 1;
    background-color: #fc5531;
    border-color: #fc5531;
    color: #fff;
    &:hover {
      background-color: #fc1944;
    }
  }
}
</style>